<template>
  <div class="main">
    <van-row class="van_row">
      <van-nav-bar
        title="食品"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      />
    </van-row>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="images" />
      </van-swipe-item>
    </van-swipe>
    <van-row class="van-row_div">
      <van-col span="12" class="van-col_left">
        <van-icon name="shopping-cart" />
        优选列表
      </van-col>
      <van-col span="12" class="van-col_right">
        <van-icon name="point-gift" />
        优选服务
      </van-col>
    </van-row>
    <van-grid :border="false" :column-num="2" class="van_tu">
      <van-grid-item
        class="van-tu-item"
        v-for="(item, index) in imagesList"
        :key="index"
        @click="showPopup"
      >
        <van-image :src="item.imagesrc" />
        <div class="div_title">
          <span class="title_text">{{ item.imagetitle }} </span>
          <div class="fudong">
            <span class="ding">顶</span>
            <span class="ding1">{{ item.imageding }}</span>
            <span class="cai">踩</span>
            <span>{{ item.imagecai }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
    <van-popup v-model="show" class="div_dingwen">
      <div class="div_dingwen_item">
        <van-image
          class="van-image_png"
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
        ></van-image>
        <div class="div_tubiao">
          <van-icon name="like-o" class="icon_left" @click="xintiaozhuan" />
          <van-icon name="close" class="icon_right" @click="guangbi" />
        </div>
        <div class="div_span">
          <span class="div_span_zi">奈雪的茶为国内知名茶饮品牌</span>
        </div>
      </div>
      <div class="jieshao">公司介绍</div>
      <div class="div_wenzi">
        奈雪的茶为国内知名茶饮品牌，创立于2015年，总部位于广东省深圳市，隶属于深圳市品道餐饮管理有限公司。创新打造“茶+软欧包”的形式，以20-35岁年轻女性为主要客群，坚持茶底4小时一换，软欧包不过夜。
        <p>
          奈雪的茶坚持为现代人提供“一杯好茶，一口软欧包”的美好生活体验，期望成为中国茶走向世界的推动者。
        </p>
        2017年12月，奈雪的茶开始走出广东地区，向全国范围内扩张，正式开启“全国城市拓展计划“。目前，奈雪的茶已扩张至北方、华中、华东、西南地区，遍布全国15座城市。所有门店均为直营，且不做任何形式的加盟。
        <p>
          今年，奈雪将深耕已开拓地区，通过增加门店数量以点带面地扩大奈雪的品牌影响力。
        </p>
      </div>
      <van-row class="van-row_footer_div">
        <van-col span="12" class="van-col_footer_left" @click="toubiao_fandui">
          <van-icon name="good-job" class="xunzhuan" />
          <span> 反对 (<span>103</span>)票 </span>
        </van-col>
        <van-col
          span="12"
          class="van-col_footer_right"
          @click="toubiao_dianzan"
        >
          <van-icon name="good-job-o" />
          <span>
            支持 (
            <span>689</span>
            )票
          </span>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import {business} from "../../api/index"
export default {
  data() {
    return {
      show: false,
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.33cy.cn%2Fuploads%2Fallimg%2F211110%2F1-211110112443T2.jpg&refer=http%3A%2F%2Fwww.33cy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833607&t=4d8453328ff4179adcd4cbcaaa467baa",
        "https://t00img.yangkeduo.com/goods/images/2021-09-30/3c1b9ddfb5a5850ffe680028da677c30.jpeg",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F2145262730%2FO1CN013BaCeg1W2Nv6XH6no_%21%212145262730.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833607&t=00450bc768bf1527ea3109b7ba4b52a0",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fm.yifen.com%2Fimg%2Ffiles%2F2019%2F3%2Fb05aad33-778e-48c3-b1b5-b450f303f015.jpg&refer=http%3A%2F%2Fm.yifen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833607&t=8383f9146459c4f113814747a7fb1abf",
      ],
      imagesList: [
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi1%2F725677994%2FO1CN01KRFCNZ28vIoqVrz8c_%21%21725677994-0-sm.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833607&t=4a760b358542a3067a673a8f92cc2a35",
          imagetitle: "酥脆薄饼",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs5.mogucdn.com%2Fmlcdn%2Fc45406%2F191216_2j8efl9ii5i73hleb5hc75988i9la_800x800.jpg&refer=http%3A%2F%2Fs5.mogucdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=803bc7bcc2eba756cb8239537c368288",
          imagetitle: "牛轧饼",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202108%2F19%2F611e3fde6ffee7138.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=799add9f720f9de4643fa1a33b748db6",
          imagetitle: "兰花豆",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.tbcdn.cn%2Ftfscom%2Fi4%2F277227205%2FTB2j0D2daigSKJjSsppXXabnpXa_%21%21277227205.jpg&refer=http%3A%2F%2Fimg1.tbcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=e9253026a080be4e54eaf237a635d628",
          imagetitle: "膨化分享礼盒",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage1.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0070061119-000000000107062690_1_400x400.jpg&refer=http%3A%2F%2Fimage1.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=8ef73de0ee598ffc0c21b8126304ced8",
          imagetitle: "夏威夷果",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fjfs%2Ft2776%2F65%2F4013964065%2F318748%2F6545b39d%2F57a1c916N7da85235.jpg%21q70.jpg&refer=http%3A%2F%2Fm.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=138c60fa25606937bc6b6c296275d9a1",
          imagetitle: "坚果礼盒",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://img1.baidu.com/it/u=127600105,2505980088&fm=26&fmt=auto",
          imagetitle: "牛肉辣条",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.tbcdn.cn%2Ftfscom%2Fi3%2F51861044%2FTB2fKx0aNolyKJjSZFDXXbNfpXa_%21%2151861044.jpg&refer=http%3A%2F%2Fimg4.tbcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833661&t=31ab9bac4eb51ded787553b90fe646e0",
          imagetitle: "零食大礼包",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.tbcdn.cn%2Ftfscom%2Fi2%2F880409635%2FTB2J5fCqJFopuFjSZFHXXbSlXXa_%21%21880409635.jpg&refer=http%3A%2F%2Fimg2.tbcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642834100&t=c31c3f38c2d848c686c2a52287867283",
          imagetitle: "果干大礼盒",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmall1.qiyipic.com%2Fmall2%2F20180112%2F37%2F3e%2Fmall2_5a57a8a4d2999d07d690373e_1x1.jpg&refer=http%3A%2F%2Fmall1.qiyipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642834100&t=25d76010f9f8b40f9114d065cfa6f324",
          imagetitle: "山药脆片",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.xiawu.com%2Fxzimg%2Fi4%2F68600436%2FO1CN01xgblKi1F5jG9voMFT_%21%2168600436.jpg&refer=http%3A%2F%2Fimgx.xiawu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642834100&t=961d29ff681f01daf71672dd48901047",
          imagetitle: "每日坚果",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdimg.good.cc%2Fimages%2FUploadImage%2F0x0%2F0%2F2165%2F2165660.jpg_w300.jpg%3Fr%3D0&refer=http%3A%2F%2Fcdimg.good.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642834325&t=95a9181e6febd7e8d2b5398dbdef6d21",
          imagetitle: "辣条大礼包",
          imageding: "630",
          imagecai: "103",
        },
      ],
    };
  },
  created(){
    this.getbuisne()
  },
  methods: {
    // 数据渲染
    async getbuisne(){
      let obj ={
        category:"",
        pagenum:1,
        pagesize:5
      }
      let res = await business(obj);
      console.log(res);
    },
    onClickLeft() {
      this.$router.push({ path: "/qualityList" }).catch((error) => error);
    },
    onClickRight() {
      Toast("按钮");
    },
    // 美食路由跳转
    // meizhi() {
    //   this.$router.push({ path: "" }).catch(error=>error);
    // },
    // 弹框
    showPopup() {
     
      this.show = true;
    },
    // 美食路由跳转

    xintiaozhuan() {
      this.$router.push({ path: "/Follow" }).catch((error) => error);
    },
    // 取消按钮
    guangbi() {
      this.show = false;
    },
    // 投票反对
    toubiao_fandui() {},
    // 投票点赞
    toubiao_dianzan() {},
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 48px;
  .van_row {
    position: relative;
    .van-nav-bar {
      color: rgba(42, 131, 78, 1);
      background-color: rgba(239, 239, 239, 1);
      font-size: 14px;

      text-align: center;
      /deep/div.van-nav-bar__title {
        font-size: 18px;
        color: rgba(42, 131, 78, 1);
      }
    }
    .van-nav-bar_after {
      position: fixed;
      width: 77px;
      height: 29px;
      border-radius: 50px;
      border: 1px solid silver;
      line-height: 29px;

      text-align: center;
      font-size: 16px;
      z-index: 13;
      top: 8px;
      right: 10px;
    }
  }
  .van-swipe {
    height: 221px;
    .images {
      width: 375px;
      height: 221px;
    }
  }
  .van-row_div {
    height: 41px;
    margin: 10px 0;
    padding: 0 18px;

    .van-col_left,
    .van-col_right {
      width: 164px;
      height: 41px;
      margin-right: 5px;
      border: 1px solid green;
      background-color: white;
      color: green;
      border-radius: 5px;
      line-height: 41px;
      text-align: center;
      font-size: 14px;
    }
    .van-col_left {
      background-color: green;
      color: white;
    }
  }
  .van_tu {
    padding: 15px;
    .van-tu-item {
      .div_title {
        width: 100%;
        height: 29px;
        line-height: 29px;
        font-size: 8px;
        .title_text {
          display: inline-block;
          width: 77px;
          height: 29px;
          line-height: 29px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fudong {
          float: right;
          .ding {
            color: rgb(25, 199, 25);
          }
          .cai {
            margin-left: 2px;
            color: red;
          }
          .ding1 {
            margin-left: 2px;
          }
        }
      }
    }
  }
  .div_dingwen {
    width: 338px;
    height: 557px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 11px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    .div_dingwen_item {
      height: 170px;
      border-radius: 11px;
      position: relative;
      .van-image_png {
        width: 338px;
        height: 170px;
      }
      .div_tubiao {
        width: 100%;
        position: absolute;
        height: 34px;

        top: 1px;
        font-size: 20px;
        .icon_left {
          float: left;
          color: red;
          padding: 5px;
        }
        .icon_right {
          float: right;

          padding: 5px;
        }
      }
      .div_span {
        position: absolute;
        height: 25px;
        color: white;
        bottom: 5px;
        left: 10px;
        font-size: 16px;
        font-weight: 100;
      }
    }
    .jieshao {
      text-align: left;
      margin: 10px 5px 0px 10px;
      font-size: 8px;
      font-weight: bold;
    }
    .div_wenzi {
      text-align: left;

      padding: 0 10px;
      font-size: 8px;
    }
    .van-row_footer_div {
      height: 41px;
      margin: 10px 0;
      padding: 0 18px;

      .van-col_footer_left,
      .van-col_footer_right {
        width: 145px;
        height: 41px;
        margin-right: 5px;

        background-color: white;
        color: green;
        border-radius: 5px;
        line-height: 41px;
        text-align: center;
        font-size: 14px;
        .xunzhuan {
          transform: rotate(180deg);
        }
      }
      .van-col_footer_right {
        background-color: green;
        color: white;
      }
    }
  }
}
</style>